<template>
  <div>
    <div class="course-top">
      <div class="course-left">
        <my-search :placeholder="placeholder" @search="handleSearch"></my-search>
        <div class="select">
          班级筛选：
          <el-select v-model="value" placeholder="请选择" @change="handleChange">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              
            ></el-option>
          </el-select>
        </div>
      </div>
      <el-button class="addclass" @click="addCourse">添加</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" width="80px"></el-table-column>
        <el-table-column width="110px" prop="class_name" label="班级"></el-table-column>
        <el-table-column width="110px" prop="level" label="水平"></el-table-column>
        <el-table-column width="110px" prop="class_hour" label="课时"></el-table-column>
        <el-table-column width="110px" prop="word" label="字"></el-table-column>
        <el-table-column width="110px" prop="course_price" label="课程价格"></el-table-column>
        <el-table-column width="150px" prop="course_box_price" label="课程+线下盒子价格"></el-table-column>
        <el-table-column width="110px" prop="updated_at" label="编辑时间"></el-table-column>
        <el-table-column width="110px" prop="sort" label="排序"></el-table-column>
        <el-table-column class="table-btn" label="操作">
          <template slot-scope="scope">
            <el-button class="editor" @click="handleEdit(scope)">编辑</el-button>
            <el-button class="delete" @click="deleteItem(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Pagination class="pagination" :pageSize="pageSize" :total="total"></Pagination>
  </div>
</template>
<script>
import MySearch from "@/common/input/index";
import { getClassList, deleteClass } from "@/api/operation";
import { ERR_OK } from "@/api/config";
import Pagination from "@/common/pagination/pagination";
import { Message } from "element-ui";
export default {
  data() {
    return {
      placeholder: '请输入班级名称',
      options: [
        {
          value: "1",
          label: "萌芽班"
        },
        {
          value: "2",
          label: "小草班"
        },
        {
          value: "3",
          label: "灌木班"
        },
        {
          value: "4",
          label: "大树班"
        }
      ],
      value: "",
      checked: true,
      tableData: [],
      page: 1,
      pageSize: 15,
      total: 0
    };
  },
  methods: {
    handleSearch(keyword) {
      this._getClassList(undefined, keyword)
    },
    handleChange(id) {
      this._getClassList(id)
    },
    deleteItem(scope) {
      this._deleteClass(scope.row.class_relationship_id)
    },
    addCourse() {
      this.$router.push({ path: "/course/classList/add" });
    },
    handleEdit(scope) {
      this.$router.push({
        path: `/course/classList/edit/${scope.row.class_relationship_id}`
      });
    },
    deleteTableDataItem(id) {
      let index = this.tableData.findIndex(item => {
        return item.class_relationship_id === id;
      });
      if (index >= 0) {
        this.tableData.splice(index, 1);
        this.total -= 1
      }
    },
    _deleteClass(id) {
      // console.log(this.tableData)
      deleteClass(id)
        .then(res => {
          if (res.code == ERR_OK) {
            Message({
              message: res.message,
              type: "info"
            });
            this.deleteTableDataItem(id);
          }
        })
        .catch(err => {
          Message({
            message: err.message,
            type: "info"
          });
        });
    },
    _getClassList(id, keyword) {
      getClassList(id, keyword)
        .then(res => {
          if (res.code == ERR_OK) {
            let ret = res.data.list;
            this.page = ret.current_page;
            this.tableData = ret.data;
            this.total = res.data.total;
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    this._getClassList();
  },
  components: {
    MySearch,
    Pagination
  }
};
</script>
<style lang="scss" scoped>
@import "@/common/scss/index.scss";
.course-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 50px;
}
.course-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.table {
  padding: 20px;
  margin-bottom: 50px;
}
.editor,
.addclass {
  width: 70px;
  height: 34px;
  line-height: 20px;
  border-radius: 6px;
  background-color: rgba(27, 166, 135, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
  color: #fff;
}
.addclass {
  margin-right: 20px;
}
.delete {
  width: 70px;
  height: 34px;
  line-height: 20px;
  border-radius: 6px;
  background-color: rgba(27, 166, 135, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
  color: #444;
}
.table /deep/ .has-gutter {
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
}
.pagination {
  @include hCenter();
  bottom: 0;
  background: #fff;
  z-index: 99;
}
</style>
